<template>
  <div class="home">
    <div class="box b2-radius author-header">
      <div data-v-657577a0="" data-v-53c53cba="" class="basic-list-item">
     
        <img class="img-avatar" src="https://img2.woyaogexing.com/2022/07/17/5bbaa5352282a8f7!400x400.jpg">

        <div data-v-657577a0="" class="center-box">

          <div data-v-657577a0="" class="line-1"><span data-v-657577a0="" class="name-field"><a data-v-657577a0=""
                href="//space.bilibili.com/28948895" target="_blank" title="考研数学龙哥">考研数学龙哥</a><!----></span><span
              data-v-657577a0="" class="desc-field">
              回复了我的评论
            </span></div>
          <div data-v-657577a0="" class="line-2">
            <div data-v-53c53cba="" data-v-657577a0="" class="real-reply">
              <div data-v-b8d820e0="" data-v-53c53cba="" class="content-list" data-v-657577a0=""><span
                  data-v-e5050176="" data-v-b8d820e0="" class="text string"><!----><span
                    data-v-e5050176="">没问题，加我哦</span></span><!----></div>
            </div><!---->
          </div>
          <div data-v-657577a0="" class="line-3"><span data-v-657577a0="" class="time-filed"><span data-v-0bc25b4d=""
                data-v-657577a0="" class="time time-span">2024年3月26日 19:21</span></span>
            <div data-v-657577a0="" class="action-field"><button data-v-53c53cba="" data-v-657577a0=""
                class="action-button"><svg data-v-53c53cba="" viewBox="0 0 40 40" class="action-icon css-1dtzbno"
                  data-v-657577a0="">
                  <path
                    d="M14.46,3.33H25.58c7.64,0,13.9,6,13.9,13.33S33.22,30,25.58,30h-.76l-7.28,6.67-2-6.67H14.46C6.81,30,.56,24,.56,16.67S6.81,3.33,14.46,3.33ZM36.7,16.67A10.91,10.91,0,0,0,25.58,6H14.46A10.91,10.91,0,0,0,3.34,16.67,10.91,10.91,0,0,0,14.46,27.33h3.19l.58,1.93.72,2.42,4-3.62.81-.74h1.88A10.91,10.91,0,0,0,36.7,16.67Z">
                  </path>
                </svg>
                回复
              </button><button data-v-53c53cba="" data-v-657577a0="" class="action-button"><svg data-v-53c53cba=""
                  viewBox="0 0 40 40" class="action-icon css-9slmkq" data-v-657577a0="">
                  <title>点赞</title>
                  <path class="fill"
                    d="m 35.140937,15.170116 h -12.92 l 0.28,-2.92 0.42,-5.1400001 a 1.28,1.28 0 0 0 -1,-1.53 1.12,1.12 0 0 0 -1.25,0.42 l -6.36,8.1700001 -0.83,1.11 h -8.34 a 2,2 0 0 0 -0.83,0.28 2.29,2.29 0 0 0 -1.25,2.08 v 14.88 a 2,2 0 0 0 0.42,1.25 2,2 0 0 0 2.08,1.11 h 23.33 a 2.36,2.36 0 0 0 1.39,-0.41 3.6,3.6 0 0 0 2.08,-2.78 l 4.44,-14.59 2.5,0.56 -2.5,-0.56 a 2.4,2.4 0 0 0 -0.14,-1.39 2.91,2.91 0 0 0 -1.52,-0.54 l 0.28,-2.5 z">
                  </path>
                  <path class="border"
                    d="M 21.402578,2.9572256 A 3.91,3.91 0 0 0 18.609609,4.1701163 L 11.810781,12.66035 H 5.5607807 a 8.43,8.43 0 0 0 -2.5,0.689454 4.91,4.91 0 0 0 -2.49999999,4.310546 v 14.859375 a 5.66,5.66 0 0 0 0.68945299,2.5 4.52,4.52 0 0 0 4.310547,2.361329 H 28.859609 a 6.37,6.37 0 0 0 6,-4.861329 l 4.451172,-14.71875 A 4.38,4.38 0 0 0 38.750234,14.330272 4.14,4.14 0 0 0 35.420156,12.66035 H 25.000234 l 0.25,-5.5605462 a 3.91,3.91 0 0 0 -1.25,-3.1894531 3.91,3.91 0 0 0 -2.597656,-0.9531251 z m 0.1875,2.5703126 a 1.12,1.12 0 0 1 0.330078,0.052734 1.28,1.28 0 0 1 1,1.5292969 l -0.419922,5.1406259 -0.279297,2.919921 h 12.919922 a 2.91,2.91 0 0 1 1.519531,0.539062 2.4,2.4 0 0 1 0.140625,1.390626 l -4.441406,14.589843 a 3.6,3.6 0 0 1 -2.080078,2.78125 2.36,2.36 0 0 1 -1.388672,0.410157 H 5.5607807 a 2,2 0 0 1 -2.080078,-1.111329 2,2 0 0 1 -0.419922,-1.25 V 17.640819 a 2.29,2.29 0 0 1 1.25,-2.080078 2,2 0 0 1 0.830078,-0.28125 h 5.8398443 v 19.580078 h 2.5 V 15.279491 l 0.830078,-1.109375 6.359375,-8.1699216 a 1.12,1.12 0 0 1 0.919922,-0.4726562 z">
                  </path>
                </svg>
                点赞
              </button><button data-v-53c53cba="" data-v-657577a0="" class="action-button del-button"><svg
                  data-v-53c53cba="" viewBox="0 0 16 16" class="action-icon css-x5loxn" data-v-657577a0="">
                  <g fill-rule="nonzero">
                    <rect id="Rectangle" opacity="0" x="0" y="0" width="16" height="16"></rect>
                    <path
                      d="M12.5146059,5.54590692 L12.5146059,12.5459069 C12.5146059,13.6504764 11.6191754,14.5459069 10.5146059,14.5459069 L5.51460589,14.5459069 C4.41003639,14.5459069 3.51460589,13.6504764 3.51460589,12.5459069 L3.51460589,5.54590692 L3.51460589,5.54590692"
                      stroke-linecap="round" stroke-linejoin="round"></path>
                    <line x1="6" y1="1.85714286" x2="9.5" y2="1.85714286" id="Line" stroke-linecap="round"
                      stroke-linejoin="round"></line>
                    <line x1="1.88309006" y1="3.6900534" x2="14.0338156" y2="3.6900534" stroke-linecap="round"
                      stroke-linejoin="round"></line>
                    <line x1="5.71428571" y1="7.63739248" x2="5.71428571" y2="11.230495" stroke-linecap="round"
                      stroke-linejoin="round"></line>
                    <line x1="8.01783774" y1="7.62825381" x2="8.01783774" y2="11.2213564" stroke-linecap="round"
                      stroke-linejoin="round"></line>
                    <line x1="10.3396003" y1="7.63344062" x2="10.3396003" y2="11.2265432" stroke-linecap="round"
                      stroke-linejoin="round"></line>
                  </g>
                </svg>
                删除该通知
              </button></div>
          </div>
        </div>
        <div data-v-657577a0="" class="right-box"><!---->
          <div data-v-53c53cba="" data-v-657577a0="" title="发一份谢谢" class="text-box">发一份谢谢</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {

    }
  },
  methods: {
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  padding: 22px;
  width: 100%;
  /* background-color: #ffffff;
  border-radius: 13px;
  padding: 20px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: auto; */
  background-color: #ffffff;
  border-radius: 13px;
}

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  margin: 30px 30px 30px 30px;
}

.left-box {
  margin-right: 15px;
}

.left-box .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  position: relative;
}

.center-box {
  flex: 1;
  order: 1; /* 使内容在中间 */
  flex-basis: 70%; /* 设置为父元素宽度的 70% */
  max-width: 70%; /* 确保不超过 70% */
}

.line-1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.line-1 .desc-field {
  font-weight: 400;
  color: #666;
  margin-left: 5px;
}

.line-2 {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.real-reply .content-list {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

.line-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.action-field {
  display: flex;
  gap: 10px;
}

.action-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.action-button:hover {
  color: #0073e6;
}

.action-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  margin-right: 4px;
}

.del-button {
  color: #e60000;
}

.text-box {
  color: #0073e6;
  font-size: 14px;
  cursor: pointer;
}

.text-box:hover {
  text-decoration: underline;
}
.img-avatar {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 8px 8px 8px 8px;
}
.basic-list-item{
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  justify-content: space-between;
  width: 100%;
}
.right-box {
  margin-left: auto; /* 将内容推到最右边 */
  order: 2; /* 将“发一份谢谢”放到最右边 */
  flex-grow: 1; /* 让它占据剩余的 30% */
  text-align: right;
}
</style>
